<template>
	<view>
		<view class="care">
			带<span>*</span>号为必填项
		</view>
		<view class="inp_warp">
			<view class="inp_title key">报销明细</view>
		</view>
		<view class="inp_warp">
			<view class="cost_warp">
				<view class="cost_li" v-for="(item,index) in freeList" :key="index">
					<view class="li_left">
						<view class="iconfont icon-jian" @tap.stop="delCost(index)"></view>
					</view>
					<view class="cost_info" @tap.stop="toAgainedit(index)">
						<view class="info_title">
							<view class="name">{{item.subject_matter}}{{item.start_address != '' ? (':'+item.start_address) : ''}} {{item.end_address != '' ? ('--'+item.end_address) : ''}}</view>
							<view class="time">{{/^\d+$/.test(item.expense_time) && item.expense_time_text ? item.expense_time_text :item.expense_time}}</view>
						</view>
						<view class="li_warp">
							<view class="li_warp_left">
								<span v-for="(field, index) in expense_field" :key="index" v-if="field.type != 'varchar' && Number(item[field.name]) > 0 && field.name != 'expense_time'">
									{{field.comment}}:<text>{{item[field.name]}}</text>
								</span>
							</view>
						</view>
					</view>
				</view>
				<view class="total_warp">
					<view class="total_left">
						<view class="total_h">合计</view>
						<view class="total_p">金额：<span>￥{{totalMoney}}</span></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="inp_warp" v-for="(item, index) in expense_field" :key="index">
			<view class="inp_title key">{{item.comment}}<span v-if="['subject_matter', 'expense_time'].indexOf(item.name) > -1">*</span></view>
			<view class="form_right">
				<textarea v-if="item.name == 'subject_matter' || item.name =='remarks'" v-model="costitem[item.name]" maxlength="-1" :class="costitem[item.name] ? 'valueActive' : '' " :placeholder="'请填写'+item.comment"
					placeholder-style="color:#999" style="height:100rpx"/>
				<picker v-else-if="item.name == 'expense_time'" @change="changeExpenseTime" mode="date" :end="max_date">
					<view class="form_right">
						<view :class="costitem.expense_time ? 'valueActive' : '' ">
							{{costitem.expense_time ? costitem.expense_time : '点击选择'}}</view>
						<view class="iconfont icon-you"></view>
					</view>
				</picker>
				<input v-else-if="item.type != 'varchar'" type="digit" min="0" v-model="costitem[item.name]" :placeholder="'请输入'+item.comment" placeholder-style="color:#999;font-size:24rpx" class="rightinput" :disabled="item.name=='total_money' ? true : false" :class="costitem[item.name] > 0 ? 'valueActive' : '' ">
				<input v-else type="text" v-model="costitem[item.name]" :placeholder="'请输入'+item.comment" placeholder-style="color:#999;font-size:24rpx" class="rightinput" :class="costitem[item.name] != '' ? 'valueActive' : '' ">
			</view>
		</view>
		
		
		<view class="bot_warp">
			<view class="botbtn" @click="$noMultipleClicks(saveCost)">继续添加</view>
			<view class="botbtn" @click="saveCost(true)">确定</view>
			<view class="botbtn" @click="toBack">返回</view>
		</view>
		<view style="height:50rpx"></view>
		
	</view>
</template>

<script>
	import { netComputedMoney, netOcrDistinguish, netEndKilometers, 
	netHistoryHumber, uploadUrl,netBaoxiaoItem } from '@/api/api.js'
	import { BASE_IMG_URL, SIGN_NO, BASE_URL } from '@/api/http.js'
	import { mapState } from 'vuex'
	import { getNewDateArry } from '@/utils/dateTimePicker.js'
	import { commonFun } from '@/common/navigate.js'
	
	export default{
		mixins:[commonFun],
		data() {
			return{
				noClick:true,    //防止  重复点击
				BASE_IMG_URL:BASE_IMG_URL,
				imgList:[],   //消费凭证
				fileList:[],   //消费附件
				consume_type:'',    //报销类型
				consume_money:'',   //报销金额
				remark:'',   //备注
				subject_matter: '',
				file_ids:'',   //附件
				number:'',   //票据张数
				
				freeList:[],   //费用列表
				totalMoney:0,   //总金额
				
				isUpload:false,   //是否上传图片
				index:null    ,//需要编辑的费用
				isEdit:false,
				expense_field:[],
				costitem:{},
				original_costitem:{},
				max_date:''
			}
		},
		computed:{
			...mapState({
				costlist: state => state.customer.costlist
			}),
		},
		watch: {
			costitem: {
				handler(newValue, oldValue) {
					var money = 0.00
					this.expense_field.forEach(item => {
						if (item.type != 'varchar' && ['total_money', 'expense_time'].indexOf(item.name) == -1) {
							money += parseFloat(newValue[item.name])
						}
					})
					console.log('money1:', money);
					if (this.expense_field.length > 0)
					this.$set(this.costitem, 'total_money', money);
				},
				deep: true // 深度监听
			}
		},
		onLoad(options) {
			console.log(options,'页面加载',this.costlist)
			this.getBItem();
			let arr = getNewDateArry()
			this.max_date = `${arr[0]}-${arr[1]}-${arr[2]}`
			this.freeList = this.costlist
			if(this.freeList.length != 0) {
				this.handleMoney()
			}
			if(options.index) {
				// this.isEdit = true
				this.index = options.index
				this.toAgainedit(this.index)
			}else{
				this.isEdit = false
			}
		},
		onShow() {
			
		},
		methods:{
			changeArray(e) {
				this.arrayIndex = e.detail.value
			},
			getBItem(){
				netBaoxiaoItem().then(res=>{
					this.expense_field = res.data.fieldArr
					if (this.expense_field && this.expense_field.length > 0 && this.index == null) {
						this.expense_field.forEach(info =>{
							this.$set(this.costitem, info.name, info.type == 'varchar' || info.name == 'expense_time' ? '' : 0);
							this.$set(this.original_costitem, info.name, info.type == 'varchar' || info.name == 'expense_time' ? '' : 0);
						})
					}
				})
			},
			changeExpenseTime(e) {
				this.$set(this.costitem, 'expense_time', e.detail.value);
				console.log('changeExpenseTime', e,this.costitem)
			},
			
			
			//上传图片
			uploadImg(data) {
				this.imgList.push(data)
			},
			delImg(index) {
				this.imgList.splice(index, 1)
			},
			//删除 费用类型
			delCost(index) {
				this.freeList.splice(index,1)
				this.$store.commit('SETCOSTlIST',this.freeList)
				this.handleMoney()
			},
			//计算  费用
			handleMoney() {
				let arr = this.freeList
				let money = 0
				arr.forEach(ele=>{
					money += Number(ele.total_money)
				})
				this.totalMoney = money
				this.money = money
			},
			
			toBack() {
				uni.navigateBack({
					delta:1
				})
			},
			saveCost(flag = false) {
				if(!this.costitem.subject_matter){
					uni.showToast({
						title:'请输入报销缘由',
						icon:'none'
					})
					return
				}
				if(!this.costitem.expense_time){
					uni.showToast({
						title:'请选择报销日期',
						icon:'none'
					})
					return
				}
				if(!this.costitem.total_money){
					uni.showToast({
						title:'请填写金额',
						icon:'none'
					})
					return
				}
				
				// //消费凭证  图片
				// let list = this.imgList
				// let arr = []
				// list.forEach((ele,index) => {
				// 	arr.push(ele.id)
				// })
				// //消费凭证  文件
				// let fileArr = []
				// this.fileList.forEach(ele=>{
				// 	fileArr.push(ele.id)
				// })
				
				if(this.isEdit){
					this.$set(this.freeList,this.index,this.costitem)
				}else{
					this.freeList.push(this.costitem)
				}
				this.$store.commit('SETCOSTlIST',this.freeList)
				this.init()
				//计算费用
				this.handleMoney()
				if(flag){
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},200)
				}
			},
			//重置
			init() {
				this.isEdit = false
				this.costitem = JSON.parse(JSON.stringify(this.original_costitem));
			},
			//重新编辑
			toAgainedit(index) {
				this.isEdit = true
				this.index = index
				//把选中的重新赋值页面   进行编辑
				let obj = this.freeList[index]
				console.log(obj,'费用')
				Object.keys(obj).forEach(key => {
					this.$set(this.costitem, key, key == 'expense_time' ? (obj.expense_time_text || obj[key]) :obj[key])
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.doc_item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:24rpx 35rpx;
		border-bottom:1rpx solid #EDEDED;
		.remarkimg{
			width:31rpx;
			height:33rpx;
			margin-right:15rpx;
		}
		.deleimg{
			width:44rpx;
			height:44rpx;
		}
		.doc_name{
			width:575rpx;
			font-size:24rpx;
			color:#333;
		}
	}
	.que_list{
		border-bottom: 1rpx solid #EDEDED;
		padding:0 45rpx 0 50rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		background:#fff;
		.que_li{
			background-color: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-right:15rpx;
			&:last-child{
				border-bottom:0;
			}
			radio{
				transform: scale(0.7);
			}
			.icon-jian{
				font-size:40rpx;
				color:#ff7800;
				margin-right:30rpx;
			}
			.que_title{
				font-size:24rpx;
				color:#333;
			}
		}
	}
	.bot_warp{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin:120rpx 0 50rpx;
		.botbtn{
			width:220rpx;
			height:60rpx;
			border-radius: 10rpx;
			background:$uni-text-color;
			text-align: center;
			line-height: 60rpx;
			font-size:26rpx;
			color:#fff;
		}
	}
	.cost_warp{
		flex:1;
		.cost_li{
			padding:24rpx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom:1rpx solid #EDEDED;
			.li_left{
				margin-right:24rpx;
				flex-shrink: 0;
				flex-shrink: 0;
				.icon-jian{
					font-size:35rpx;
					color:#ff7800;
				}
			}
			.cost_info{
				flex:1;
				.info_title{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.name{
						font-size:26rpx;
						color:#333;
					}
					.time{
						font-size:24rpx;
						color:#666;
					}
				}
				.li_warp{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top:15rpx;
					.li_warp_left{
						font-size:26rpx;
						color:#333;
						margin-right:24rpx;
						span{
							font-size:24rpx;
							color:#666;
							margin-right: 4rpx;
							text{
								color: $uni-color-error;
							}
						}
					}
				}
			}
		}
		.total_warp{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top:24rpx;
			.total_left{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.total_h{
					font-size:28rpx;
					color:#000000;
				}
				.total_p{
					margin-left:20rpx;
					font-size:26rpx;
					color:#666;
					span{
						font-size:28rpx;
						color:#333;
					}
				}
			}
			.total_right{
				font-size:26rpx;
				color:#0287FF;
				width:120rpx;
				height:40rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 38rpx;
				border:1rpx solid #0287FF;
			}
		}
	}
	.cost_li{
		padding:24rpx 50rpx;
		.cost_type{
			.uni-input{
				width:200rpx;
				height:45rpx;
				background:#fff;
				border-radius: 10rpx;
				box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(0,0,0,0.1);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size:26rpx;
				color:#333;
				.selexiaimg{
					width:30rpx;
					height:17rpx;
					margin-left:10rpx;
				}
			}
		}
	}
	.inp_warp {
		padding:30rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #EDEDED;
		.inp_title {
			font-size: 26rpx;
			color:#666;
		}
		.form_right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: #999;
			min-width:450rpx;
			text-align: right;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-left:24rpx;
			}
			.rightinput{
				width:100%;
				text-align: right;
			}
		}
		.add_in{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size:26rpx;
			color:#FFA205;
			.icon-jiahaocu{
				font-size:28rpx;
				color:#FFA205;
				margin-right:5rpx;
			}
		}
	}
	.fllow_area {
		background-color: #fff;
		padding:30rpx;
		border-bottom:1rpx solid #EDEDED;
		margin-bottom: 30rpx;
		.area_head {
			height: 100rpx;
			line-height: 100rpx;
			color:#666;
		}
		textarea {
			width: 620rpx;
			height: 260rpx;
			margin:0 auto;
			background:rgba(202, 202, 202, 0.2);
			font-size:26rpx;
			color:#999999;
			border-radius: 20rpx;
			padding:24rpx;
			box-sizing: border-box;
		}
	}
	.imglist {
		padding: 24rpx 34rpx;
		background: #fff;
		border-bottom: 1rpx solid #EDEDED;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	
		.imgbox {
			width: 160rpx;
			height: 160rpx;
			margin-right: 14rpx;
			position: relative;
			margin-bottom: 24rpx;
			border: 1rpx solid #EDEDED;
			&:nth-child(4n){
				margin-right:0;
			}
			.delimg {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				position: absolute;
				right: -16rpx;
				top: -16rpx;
				background: rgba(0, 0, 0, 0.5);
				z-index: 2;
			}
	
			.selfimg {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
</style>
